<template>
  <div class="bju">
    <div style="margin-top: 1.5%;">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="查询区间">
          <el-date-picker
            v-model="formInline.qutime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="queryByTime">查询</el-button>
          <el-button type="" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div
      class="echart tu"
      ref="mychart"
      id="mychart"
    ></div>

  </div>
</template>

<script>
import * as echarts from "echarts";
import {listReportDepartment, listReportDepartmentByTime} from "@/api/module/ljw/report"

export default {
  data() {
    return {
      // 时间选择器
      formInline: {
        qutime: [],
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      queryParamsReport: {
        note2: null,
        note3: null
      },
      // 上报信息查询结果
      reportList: [],
      // 图表参数
      option: {
        title: {
          text: ""
        },
        tooltip: {
          textStyle: {
            color: 'black'
          },
        },
        legend: {
          data: []
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: 'black'
            },
          },
          data: []
        },
        yAxis: {
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: 'black'
            },
          }
        },
        series: [
          {
            name: "",
            type: "bar", //类型为柱状图
            data: [],
            itemStyle: {
              normal: {
                color: function (params) {
                  // let colorList = [
                  //   '#66CCFF',
                  //   '#39C5BB',
                  //   '#FFA500',
                  //   '#E45D6B'
                  // ]
                  let colorList = [
                    '#1E90FF',
                  ]
                  return colorList[params.dataIndex % 1]
                }
              }
            }
          }
        ]
      },
      // 图表
      myChart: null
    }
  },
  mounted() {
    this.getReportList()
    this.myChart = echarts.init(this.$refs.mychart);// 图表初始化
  },
  methods: {
    getReportList() {
      listReportDepartment().then(res => {
        // 获取查询到的数据
        this.reportList = res.rows
        this.setChartData()
      })
    },
    setChartData() {
      // 清空图表数据
      this.option.xAxis.data = []
      this.option.series[0].data = []
      if (this.reportList.length > 0) {
        for (let i = 0; i < this.reportList.length; i++) {
          // 装入新的数据
          this.option.xAxis.data.push(this.reportList[i].departmentName)
          this.option.series[0].data.push(this.reportList[i].reportNumber)
        }
      }
      this.initEcharts()
    },
    initEcharts() {
      this.myChart.setOption(this.option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    // 按时间区间进行查询
    queryByTime() {
      if (this.formInline.qutime.length === 0) {
        this.$modal.msgError("未选择时间区间")
      } else {
        // 格式化时间
        const date1 = new Date(this.formInline.qutime[0]);
        const date2 = new Date(this.formInline.qutime[1])
        // 分割开始时间
        const year1 = date1.getFullYear()
        const month1 = date1.getMonth() + 1 // 月份是从0开始计数的，需要加1
        const day1 = date1.getDate()
        const hour1 = date1.getHours()
        const minute1 = date1.getMinutes()
        const second1 = date1.getSeconds()
        // 生成新的开始时间
        const formattedDate1 = year1 + "-" + (month1 < 10 ? "0" + month1 : month1) + "-" + (day1 < 10 ? "0" + day1 : day1) + ' ' + (hour1 < 10 ? "0" + hour1 : hour1) + ':' + (minute1 < 10 ? "0" + minute1 : minute1) + ':' + (second1 < 10 ? "0" + second1 : second1)
        // 分割结束时间
        const year2 = date2.getFullYear()
        const month2 = date2.getMonth() + 1 // 月份是从0开始计数的，需要加1
        const day2 = date2.getDate()
        const hour2 = date2.getHours()
        const minute2 = date2.getMinutes()
        const second2 = date2.getSeconds()
        // 生成新的结束时间
        const formattedDate2 = year2 + "-" + (month2 < 10 ? "0" + month2 : month2) + "-" + (day2 < 10 ? "0" + day2 : day2) + ' ' + (hour2 < 10 ? "0" + hour2 : hour2) + ':' + (minute2 < 10 ? "0" + minute2 : minute2) + ':' + (second2 < 10 ? "0" + second2 : second2)

        // 设置note2和note3为格式化后的时间
        this.queryParamsReport.note2 = formattedDate1
        this.queryParamsReport.note3 = formattedDate2
        listReportDepartmentByTime(this.queryParamsReport).then(res => {
          // 接收查询到的数据
          this.reportList = res.rows
          this.setChartData()
          // 将note2和note3置空
          this.queryParamsReport.note2 = null
          this.queryParamsReport.note3 = null
        })
      }
    },
    // 重置
    reset() {
      // 清空相关数据
      this.reportList = []
      this.formInline.qutime = ''
      // 重新进行查询
      this.getReportList()
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/views/module/shao/blackFont";

.bju {
  width: 96%;
  margin-top: 1.5%;
  margin-left: 2%;
  margin-right: 2%;
}

.tu {
  text-align: center;
  width: 100%;
  height: 750px;
}
</style>
